<!DOCTYPE html>
<html>
<head>
<title>Content Alignment examples</title>
<meta name="description" content="An interactive GoJS Diagram demonstrating viewports and document bounds and alignment and scaling." />
<!-- Copyright 1998-2016 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<link href="../assets/css/goSamples.css" rel="stylesheet" type="text/css" />  <!-- you don't need to use this -->
<script src="goSamples.js"></script>  <!-- this is only for the GoJS Samples framework -->
<script id="code">
  function init() {
    if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
    var $ = go.GraphObject.make;  // for conciseness in defining templates

    myDiagram = $(go.Diagram, "myDiagramDiv",  // Must be the ID or reference to div
    {
      // start everything in the middle of the viewport
      initialContentAlignment: go.Spot.Center, 
      "undoManager.isEnabled": true 
    });

    for (var i = 0; i < 15; i++) {
      myDiagram.add( // add an unbound Node to the diagram at a random position
        $(go.Node,
          { position: new go.Point(Math.random() * 251, Math.random() * 251) },
          $(go.Shape, "Circle",
            { fill: go.Brush.randomColor(150), strokeWidth: 2, desiredSize: new go.Size(30,30) })
        ));
    }

    // automatically update information in the panel
    myDiagram.addDiagramListener("DocumentBoundsChanged", updateDOM);
    myDiagram.addDiagramListener("ViewportBoundsChanged", updateDOM);

    var myPosX = document.getElementById("positionX");
    var myPosY = document.getElementById("positionY");
    var myScale = document.getElementById("scale");
    var myDocBounds = document.getElementById("docBounds");

    function updateDOM(e) {
      var d = e.diagram;
      var pos = d.position;
      myPosX.value = Math.round(pos.x, 2);
      myPosY.value = Math.round(pos.y, 2);
      myScale.value = d.scale;
      var b = d.documentBounds;
      myDocBounds.textContent = b.x.toFixed(2) + ", " + b.y.toFixed(2) + "  " + b.width.toFixed(2) + " x " + b.height.toFixed(2);
    }
  }

  // occurs when one of the contentAlign radio buttons is clicked
  function changeContentAlign(spot) {
    myDiagram.startTransaction("");
    myDiagram.contentAlignment = go.Spot[spot];
    myDiagram.commitTransaction("");
  }

  function changePosition(posx, posy) {
    myDiagram.startTransaction("");
    var x = parseInt(posx);
    var y = parseInt(posy);
    myDiagram.position = new go.Point(x, y);
    myDiagram.commitTransaction("");
  }

  function changeScale(scale) {
    var scale = parseFloat(scale);
    if (scale > 0) {
      myDiagram.startTransaction("");
      myDiagram.scale = scale;
      myDiagram.commitTransaction("");
    }
  }

  function changeFixedBounds(fx, fy, fw, fh) {
    myDiagram.startTransaction("");
    var x = parseFloat(fx);
    var y = parseFloat(fy);
    var h = parseFloat(fw);
    var w = parseFloat(fh);
    myDiagram.fixedBounds = new go.Rect(x, y, Math.max(1, w), Math.max(1, h));
    myDiagram.commitTransaction("");
  }

  function changePadding(pt, pr, pb, pl) {
    myDiagram.startTransaction("");
    var t = parseFloat(pt);
    var r = parseFloat(pr);
    var b = parseFloat(pb);
    var l = parseFloat(pl);
    myDiagram.padding = new go.Margin(t, r, b, l);
    myDiagram.commitTransaction("");
  }

  function changeAutoScale(scaleType) {
    myDiagram.startTransaction("");
    myDiagram.autoScale = go.Diagram[scaleType];
    myDiagram.commitTransaction("");
  }
</script>
</head>
<body onload="init()">
<div id="sample">
<h3>GoJS Content Alignment</h3>
<div style="width:100%; white-space: nowrap">
  <div style="display: inline-block; vertical-align: top; width:50%">
    <div id="myDiagramDiv" style="height: 400px; background: whitesmoke; border: solid 1px black"></div>
  </div>

  <div style="display: inline-block; vertical-align: top; width:50%">
    <div style="border: solid 1px gray; padding:5px">
      Diagram.documentBounds: <div id="docBounds" style="display: inline-block"></div>

      <p>Diagram.contentAlignment:<br />
        <input type="radio" name="contentAlign" onclick="changeContentAlign(this.id)" id="None" checked/><label for="None">None</label>
        <input type="radio" name="contentAlign" onclick="changeContentAlign(this.id)" id="Center"/><label for="Center">Center</label><br/>
        <input type="radio" name="contentAlign" onclick="changeContentAlign(this.id)" id="Left"/><label for="Left">Left</label>
        <input type="radio" name="contentAlign" onclick="changeContentAlign(this.id)" id="Right"/><label for="Right">Right</label><br/>
        <input type="radio" name="contentAlign" onclick="changeContentAlign(this.id)" id="Top"/><label for="Top">Top</label>
        <input type="radio" name="contentAlign" onclick="changeContentAlign(this.id)" id="Bottom"/><label for="Bottom">Bottom</label><br/>
      </p>
      <p>Diagram.position:<br />
        <input type="text" size="2" id="positionX" value="NaN"/>
        <input type="text" size="2" id="positionY" value="NaN"/>
        <input type="button" onclick="changePosition(positionX.value, positionY.value)" value="Change"/>
      </p>

      <p>Diagram.scale:<br />
        <input type="text" size="2" id="scale" value="1"/>
        <input type="button" onclick="changeScale(scale.value)" value="Change"/>
      </p>

      <p>Diagram.fixedBounds (x, y, width, height):<br />
        <input type="text" size="2" id="fixedX" value="NaN"/>
        <input type="text" size="2" id="fixedY" value="NaN"/>
        <input type="text" size="2" id="fixedW" value="NaN"/>
        <input type="text" size="2" id="fixedH" value="NaN"/>
        <input type="button" onclick="changeFixedBounds(fixedX.value, fixedY.value, fixedW.value, fixedH.value)" value="Set"/>
      </p>

      <p>Diagram.padding (top, right, bottom, left):<br />
        <input type="text" size="2" id="padT" value="5"/>
        <input type="text" size="2" id="padR" value="5"/>
        <input type="text" size="2" id="padB" value="5"/>
        <input type="text" size="2" id="padL" value="5"/>
        <input type="button" onclick="changePadding(padT.value, padR.value, padB.value, padL.value)" value="Set"/>
      </p>

      <p>Diagram.autoScale:<br />
        <input type="radio" name="autoScale" onclick="changeAutoScale(this.value)" id="DiagramNone" value="None" checked /><label for="DiagramNone">Diagram.None</label><br/>
        <input type="radio" name="autoScale" onclick="changeAutoScale(this.id)" id="Uniform" /><label for="Uniform">Diagram.Uniform</label><br/>
        <input type="radio" name="autoScale" onclick="changeAutoScale(this.id)" id="UniformToFill" /><label for="UniformToFill">Diagram.UniformToFill</label><br/>
        (but no greater than CommandHandler.defaultScale)
      </p>
      <input type="button" onclick="myDiagram.commandHandler.zoomToFit()" value="Zoom to Fit"/>
    </div>
  </div>
    <p>
        A Diagram's <a>Diagram.contentAlignment</a> property determines how parts are positioned when the
        <a>Diagram.viewportBounds</a> width or height is different than the <a>Diagram.documentBounds</a> width or height.
    </p>
</div>
</div>
</body>
</html>
